<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>书籍阅读内容页</title>
    <link href="../css/bookdetails-1.css" rel="stylesheet" type="text/css">
    <link href="../css/read-1.css" rel="stylesheet" type="text/css">
    <script src="../tool/jquery.js"></script>
    <script src="../js/bookdetails-1.js"></script>
    <script src="../js/read-1.js"></script>
    <style>
        .self-left {
            position: fixed;
            top: 30%;
            left: 5%;
            height: 100px;
            width: 46px;
            /* background-color: pink; */
            box-shadow: 0 2px 4px rgba(0 ,0 ,0 , 0.2);
        }
        
        .ziti,
        .yanse,
        .yangsi {
            margin: 4px 8px;
            padding: 3px;
            height: 28px;
            width: 30px;
            /* background-color: red; */
            font-size: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0 ,0 ,0 , 0.2);
            /* line-height: 28px; */
        }
        
        .details {
            position: fixed;
            top: 30%;
            left: 8.2%;
            /* background-color: pink; */
            height: 100px;
            width: 200px;
        }
        
        .zitid {
            height: 33px;
            width: 143px;
            border: 1px solid black;
            font-size: 20px;
            visibility: hidden;
        }
        
        .yansed {
            height: 33px;
            width: 143px;
            border: 1px solid black;
            font-size: 20px;
            visibility: hidden;
        }
        
        .yangsid {
            height: 33px;
            width: 143px;
            border: 1px solid black;
            font-size: 20px;
            visibility: hidden;
        }
        
        .zitidd {
            float: left;
            padding: 3px;
            margin: 0px 10px;
        }
        
        .yangsedd {
            float: left;
            padding: 3px;
        }
        
        .yangsidd {
            float: left;
            padding: 3px;
        }
    </style>


</head>

<body>
    <header class="clear">
        <img src="../img/logo.jpg">
        <div class="logo">
            <h1></h1>
            <div class="clear"></div>
            <p>想看既看，想听既听的阅读</p>
        </div>
        <div class="search left">
            <form action="" method="get">
                <input type="text" value="" placeholder="请输入书名或作者名称">
                <input type="submit" value="搜索">
            </form>
            <p class="left">
                <span>热门推荐：</span>
                <a href="javascript:;">原来你还在这里</a>
                <a href="javascript:;">原来你还在这里</a>
                <a href="javascript:;">原来你还在这里</a>
                <a href="javascript:;">原来你还在这里</a>
            </p>
        </div>
        <div class="reg">
            <div class="delu">
                <a href="javascript:;">登录</a>
                <span>|</span>
                <a href="javascript:;">注册</a>
            </div>
            <!--  <div class="delu2 clear">
      <div class="self ease">
      <a href="javascript:;" class="clear">雪剑无影<span class="icon ease"></span></a>
      <div class="clear"></div>
       <ul  class="clear">
         <li><a href="javascript:;">个人中心</a></li>
         <li><a href="javascript:;">我的书架</a></li>
         <li><a href="javascript:;">账号设置</a></li>
         <li><a href="javascript:;">上传文件</a></li>
         <li><a href="javascript:;">退出登录</a></li>
       </ul>
      </div>
      <span class="split">|</span>
       <a  href="javascript:;"  title="您有3条未读消息" class="news">消息<b>3</b></a>
  </div>-->
            <span>|</span>
            <a href="javascript:;">意见反馈</a>
        </div>
    </header>
    <!--头部结束-->

    <nav class="clear">
        <ul class="nav_1 clear">
            <div class="active"></div>
            <li><a href="javascript:;">首页</a></li>
            <li><a href="javascript:;">文学</a>
                <ul class="clear">
                    <li><a href="javascript:;">现代文学</a></li>
                    <li><a href="javascript:;">外国文学</a></li>
                    <li><a href="javascript:;">古典文学</a></li>
                    <li><a href="javascript:;">散文随笔</a></li>
                </ul>
            </li>
            <li><a href="javascript:;">社会学</a></li>
            <li><a href="javascript:;">心理学</a></li>
            <li><a href="javascript:;">经济学</a></li>
            <li><a href="javascript:;">自然科学</a></li>
            <li><a href="javascript:;">历史</a></li>
            <li><a href="javascript:;">其他</a>
                <ul class="clear">
                    <li><a href="javascript:;">旅游攻略</a></li>
                    <li><a href="javascript:;">周刊杂志</a></li>
                    <li><a href="javascript:;">经典短语</a></li>
                </ul>
            </li>
            <div class="submission">
                <a href="javascript:;"><span class="icon_span"></span>我要投稿</a>
            </div>
        </ul>
    </nav>
    <!--导航结束-->

    <div class="box">
        <div class="pos">
            当前位置：<a href="javascript:;">首页</a> > <a href="javascript:;">文化苦旅</a> > 正文
            <!-- <a href="javascript:;" class="right">回到目录>></a> -->
        </div>
        <div class="con">
            <div class="tit">新版小序</div>
            <!--章节名称-->
            <div class="arcticle">
                <p>让我先抄录一则笔记：</p>
                <p> 某家一子，出门旅世，因步履开阔、人气健旺而遭来多方嫉恨，不时有秽言凶讯传回门庭 。家人塞耳有声，闭目有魇，久而久之，以为浪子早已殒灭旷野，只得横心割舍，弃绝记忆，任何言谈，皆不提及。
                </p>
                <p> 岂料二十年后某日黄昏，屋外步履纷沓，笑语欢腾。家人窥之门缝，只见浪子器宇轩昂，从者如堵，浩荡肃穆，恭立门外。 家人急忙开门相拥，拭泪而问，方知其于漫漫岁月间，浪迹宇内，周济天下，一路伤痕斑斑，而身心犹健。家人遂烧水为沐，煮米为食 ，裁布为衣，整榻为憩…… 对我来说，《文化苦旅》就是这个外出的浪子。它“出门旅世”的时间更长，带给我的麻烦难以计数。 所有麻烦，都来自于它的极度畅销。它不小心成了当时罕见的一个文化热近代，世界历史上点，而它又不具备任何权力背景， 因而立即转化成媒体的攻击焦点。当时国内的多数媒体，还不清楚诬陷和诽谤是刑事犯罪，因此都围绕着它，连年倾泄，恶语滔滔。
                </p>
                <p>
                    其实在公共场合出现的它，多数不是真身。因为已有统计，此书盗版的数量至少是正版的十八倍。也就是说，十八个假身之中才可能混进一个真身。 但是即便这样也不放过，那么多报刊一直在伪造它的种种“错误”，顺便把我也一起伪造，一起做假。我曾撰文笑问南方一家著名周报的社长：“贵报二十余年锲而不舍地编造我的生平，篇幅如此惊人，今天请你告诉我，哪一句是真的？一句，只要一句。” 这些传媒自恃权势，当然不屑回答。结果，一年年下来，即便是我的朋友们，也都捧着我的盗版书，信着我的假生平，听着我的假传闻，却又宽容了我。我自己连解释一句，都觉得不好意思了。想来想去，都是《文化苦旅》惹的祸。因此，我一直想切割与它的关系，不管在什么场合，都不会提到它。
                    它 ，成了一具无主的稻草人，成了一个废弃的箭靶子，破破烂烂地歪斜在田野间，连乌鸦、田鼠都不愿看它一眼。国内曾经举办过多次涵盖几十年的散文评选，入选的书籍非常之多，它都不在。有读者对此有点疑问，我说，当然不会在。
                </p>
            </div>
            <!--正文-->
            <div class="flip">
                <a href="javascript:;">上一页</a> | <a href="javascript:;">下一页</a>
            </div>
        </div>
        <div class="prenext">
            <p class="left"><span class="icon"></span><a href="javascript:;" class="ease">在公共场合出1</a></p>
            <p class="right"><span class="icon"></span><a href="javascript:;" class="ease">在公共场合出2</a></p>
        </div>
        <!--上下章-->
    </div>
    <!--内容区结束-->

    <ul class="fixed">

        <li class="icon" title="展开目录"></li>
        <li class="icon" title="我要评论"></li>

        <li class="icon" title="上一章"></li>
        <li class="icon" title="下一章"></li>
        <li class="icon" title="回到顶部"></li>

        <div class="Catalog">
            <div class="cata_2">
                <div class="scroll"></div>
            </div>
            <!--滚动条-->
            <div class="cata_1">
                <ul class="cata_con">
                    <li><a href="#" class="tit">新版小叙</a></li>
                    <li><a href="#" class="tit">牌坊</a></li>
                    <li><a href="#"><span></span>一</a></li>
                    <li><a href="#"><span></span>二新版小叙</a></li>
                    <li><a href="#"><span></span>三新版小叙</a></li>
                    <li><a href="#"><span></span>一</a></li>
                    <li><a href="#"><span></span>二新版小叙</a></li>
                    <li><a href="#"><span></span>三新版小叙</a></li>
                    <li><a href="#" class="tit">新版小叙</a></li>
                    <li><a href="#" class="tit">牌坊</a></li>
                    <li><a href="#"><span></span>一</a></li>
                    <li><a href="#"><span></span>二新版小叙</a></li>
                    <li><a href="#"><span></span>三新版小叙</a></li>
                    <li><a href="#"><span></span>一</a></li>
                    <li><a href="#"><span></span>二新版小叙</a></li>
                    <li><a href="#"><span></span>三新版小叙</a></li>
                </ul>
            </div>
            <!--文章目录内容-->
        </div>
        <!--展开目录-->

        <div class="I_ment">
            <p class="r"></p>
            <p class="r2"></p>

            <p class="left red">评论内容不得少于5个字</p><span class="icon"><!--X--></span>
            <form action="" method="post">
                <textarea name="i_ment">我要评论...</textarea>
                <p class="left">您<samp>还可以输入</samp><b>100</b>个字</p><input type="button" class="sub" value="提交">
            </form>
        </div>
        <!--我要评论-->
    </ul>


    <div class="mark">
        <div class="mark_bor">
            <div class="clear"><img src="../img/selected.png">
                <p>发表评论成功</p>
            </div>
        </div>
    </div>
    <!--遮罩层-->
    <div class="self-left">
        <div class="ziti">中</div>
        <div class="yanse">白</div>
        <div class="yangsi">黑</div>
    </div>
    <div class="details">
        <div class="zitid">
            <div class="zitidd">小</div>
            <div class="zitidd">中</div>
            <div class="zitidd">大</div>
        </div>
        <div class="yansed">
            <div class="yangsedd">黄色</div>
            <div class="yangsedd">粉色</div>
            <div class="yangsedd">灰色</div>
        </div>
        <div class="yangsid">
            <div class="yangsidd">宋体</div>
            <div class="yangsidd">楷体</div>
            <div class="yangsidd">黑体</div>
        </div>
    </div>
    <footer class="clear">
        <p>XXX是学习分享平台，如对本站有意见和建议请<a href="javascript:;">留言</a></p>
        <p>本站所有信息仅用于学习交流，不用商业用途 Powered by XXX</p>
    </footer>
    <script>
        var ziti = document.querySelector(".ziti");
        var yanse = document.querySelector(".yanse");
        var yangsi = document.querySelector(".yangsi");
        var a = 0;
        var b = 0;
        var c = 0;

        var zitid = document.querySelector(".zitid");
        var yansed = document.querySelector(".yansed");
        var yangsid = document.querySelector(".yangsid");
        var con = document.querySelector('.con');

        // 点击后显示
        ziti.addEventListener("click", function() {
            if (a == 0) {
                zitid.style.visibility = 'visible';
                a++;
            } else {
                a = 0;
                zitid.style.visibility = 'hidden';
            }
        })
        yanse.addEventListener("click", function() {
            if (b == 0) {
                yansed.style.visibility = 'visible';
                b++;
            } else {
                b = 0;
                yansed.style.visibility = 'hidden';
            }
        })
        yangsi.addEventListener("click", function() {
                if (a == 0) {
                    yangsid.style.visibility = 'visible';
                    a++;
                } else {
                    a = 0;
                    yangsid.style.visibility = 'hidden';
                }
            })
            // 字体大小点击后出效果
        zitid.firstElementChild.addEventListener('click', function() {
            this.style.color = "red";
            ziti.innerHTML = "小";
            con.style.fontSize = "10px";
            zitid.firstElementChild.nextElementSibling.style.color = "black";
            zitid.lastElementChild.style.color = "black";
        })
        zitid.firstElementChild.nextElementSibling.addEventListener('click', function() {
            this.style.color = "red";
            ziti.innerHTML = "中";
            con.style.fontSize = "20px";
            zitid.lastElementChild.style.color = "black";
            zitid.firstElementChild.style.color = "black";
        })
        zitid.lastElementChild.addEventListener('click', function() {
                this.style.color = "red";
                ziti.innerHTML = "大";
                con.style.fontSize = "30px";
                zitid.lastElementChild.style.color = "black";
                zitid.firstElementChild.nextElementSibling.style.color = "black";
            })
            // 颜色点击后出效果
        yansed.firstElementChild.addEventListener('click', function() {
            this.style.color = "red";
            yanse.innerHTML = "黄";
            con.style.backgroundColor = "rgba(229, 224, 145, 0.6)";
            yansed.firstElementChild.nextElementSibling.style.color = "black";
            yansed.lastElementChild.style.color = "black";
        })
        yansed.firstElementChild.nextElementSibling.addEventListener('click', function() {
            this.style.color = "red";
            yanse.innerHTML = "粉";
            con.style.backgroundColor = "rgba(238, 13, 13, 0.119)";
            yansed.lastElementChild.style.color = "black";
            yansed.firstElementChild.style.color = "black";
        })
        yansed.lastElementChild.addEventListener('click', function() {
                this.style.color = "red";
                yanse.innerHTML = "灰";
                con.style.backgroundColor = "rgba(187, 172, 172, 0.315)";
                yansed.lastElementChild.style.color = "black";
                yansed.firstElementChild.nextElementSibling.style.color = "black";
            })
            // 字体点击后出效果
        yangsid.firstElementChild.addEventListener('click', function() {
            this.style.color = "red";
            yangsi.innerHTML = "宋";
            con.style.fontFamily = "宋体";
            yangsid.firstElementChild.nextElementSibling.style.color = "black";
            yangsid.lastElementChild.style.color = "black";
        })
        yangsid.firstElementChild.nextElementSibling.addEventListener('click', function() {
            this.style.color = "red";
            yangsi.innerHTML = "楷";
            con.style.fontFamily = "楷体";
            yangsid.lastElementChild.style.color = "black";
            yangsid.firstElementChild.style.color = "black";
        })
        yangsid.lastElementChild.addEventListener('click', function() {
            this.style.color = "red";
            yangsi.innerHTML = "黑";
            con.style.fontFamily = "黑体";
            yangsid.lastElementChild.style.color = "black";
            yangsid.firstElementChild.nextElementSibling.style.color = "black";
        })
    </script>
</body>

</html>